<template>
    <div>
        <el-container>
            <el-header>
                <div class="header-left">
                    <h3>后台管理系统</h3>
                </div>
                <div class="header-right">
                    <el-image style="width: 50px; height: 50px;border-radius: 25px;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
                    <span class="user-name">{{$store.state.userInfo?.username}}</span>
                    <span class="logout" @click="logout">退出</span>
                </div>
            </el-header>
            <el-container class="container">
                <el-aside width="200px">
                    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="false"
                    :unique-opened="true" :router="true" :collapse-transition="true" background-color="#545c64"
                    text-color="#fff" active-text-color="#ffd04b" :default-active="activeMenu" @select="handleSelect">
                        <el-submenu v-for="item in menuTree" :key="item.id" :index="item.path">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span slot="title">{{item.name}}</span>
                            </template>
                            <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.path">{{subItem.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main><router-view /></el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { buildMenuTree } from '../src/utils/treePermission';
export default {
    name: 'Index',
    data() {
        return {
            activeMenu:''
        }
    },
    created(){
        console.log(this.$store.state.permission);
        console.log(this.menuTree);
        this.activeMenu = this.$route.path;
    },
    computed:{
        menuTree(){
            return buildMenuTree(this.$store.state.permission);
        }
    },
    methods: {
        handleError() {
            return true;
        },
        async logout() {
            const res = await this.$axios.post('/logout');
            if(res.code === 1){
                this.$store.commit('logout');
            }
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
            this.activeMenu = key;
            this.$router.push(key);
        }
    }
}
</script>
<style scoped lang="scss">
    .el-header{
        background-color: #579ceb;
        height: 6vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header-left{
        color: #2b2b2b;
        margin-left: 40px;
    }
    .header-right{
        // width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 40px;
    }
    .user-name{
        color: #2b2b2b;
        margin-right: 30px;
        margin-left: 10px;
        // font-size: 16px;
    }
    .logout{
            color: #ffffff;
            cursor: pointer;
    }
    .el-aside{
        background-color: #545c64;
        /* width: 100px; */
    }
    .el-main{
        background-color: #8c0000;
    }
    .container{
        height: 94vh;
    }
</style>